<template>
  <div>
    <div class="top-search" :style="'height: '+ statusBarHeight +'px;background-color:' + color + ';'">
      <div class="top-back" :style="'top: '+ backTop + 'px'"
        @click="topBack">
        <label class="flex v-align-c">
          <icon class="iconfont icon-arrow-right"></icon>
        </label>
      </div>
      <div class="search-bar" :style="'padding-top: '+ searchTop + 'px'">
        <div class="search" @click="goSearch">
          <van-icon name="search" color="#999999" size="16px" class="mar-l-8 mar-r-4 flex"/>
          <div class="font-12 fong-color-9">{{ searchTxt }}</div>
        </div>
      </div>
    </div>
    <div :style="'height: '+ statusBarHeight +'px'"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        backTop: 0,
        searchTop: 0,
        searchTxt: ''
      }
    },
    props: {
      statusBarHeight: {
        type: Number,
        default: 0
      },
      searchType: {
        type: String,
        default: ''
      },
      color: {
        type: String,
        default: '#ffe200'
      },
      backDetailUrl: {
        type: String,
        default: ''
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') !== -1) {
        this.backTop = this.statusBarHeight - 42
        this.searchTop = this.statusBarHeight - 40
      } else {
        this.backTop = this.statusBarHeight - 39
        this.searchTop = this.statusBarHeight - 36
      }
    },
    onShow() {
      this.initEls()
    },
    mounted() {
      setTimeout(() => {
        this.initEls()
      }, 100)
    },
    methods: {
      initEls() {
        if (this.searchType === 'buyer') {
          this.searchTxt = '搜索店主昵称/手机号/订单号'
        } else {
          this.searchTxt = '搜索顾客昵称/手机号/订单号'
        }
      },
      topBack() {
        if (this.backDetailUrl) {
          this.$pt.switchTab({
            url: this.backDetailUrl
          })
          return
        }
        this.$pt.navigateBack({ delta: -1 })
      },
      goSearch() {
        if (this.searchType === 'seller-other') {
          this.$pt.navigateTo({url: '/pages/personal/orderSearchSell/main?searchType=' + this.searchType})
        } else {
          this.$pt.navigateTo({url: '/pages/personal/orderSearch/main?searchType=' + this.searchType})
        }
      }
    }
  }
</script>

<style lang="less" scoped>  
  .top-search{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 101;
    .search-bar{
      padding-left: 45px;
      .search{
        width: 215px;
        display: flex;
        justify-content: left;
        align-items: center;
        border-radius: 25px;
        height: 30px;
        color: #aeaeae;
        background-color: #fff;
      }
    }
  }
  .top-back{
    position: fixed;
    left: 0px;
    top: 28px;
    z-index: 101;
    padding: 8px 10px 8px 7px;
    .iconfont{      
      font-size: 20px;
      font-weight: bold;
      transform:rotate(180deg);
    }
  }
  // .top-search{
  //   background: #ffe200;
  // }
</style>
